interface FooterProps {
  buildVersion?: string;
  releaseVersion?: string;
  appEnv?: string;
}

export const Footer = ({ buildVersion, releaseVersion, appEnv }: FooterProps) => {
  return (
    <footer
      className="mt-8 border-t py-6"
      style={{
        borderColor: 'var(--border-muted)',
        paddingBottom: 'calc(1.5rem + env(safe-area-inset-bottom))',
      }}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-wrap items-center justify-between gap-3">
        <div className="min-w-0 text-left">
          <p className="text-sm opacity-80">Calibre Web Book Downloader</p>
          <p className="text-xs opacity-60 mt-1">
            Build: {buildVersion || 'dev'} • Release: {releaseVersion || 'dev'} • Env:{' '}
            {appEnv || 'development'}
          </p>
        </div>
        <div className="flex items-center gap-3 shrink-0">
          <a
            href="https://github.com/calibrain/calibre-web-automated-book-downloader"
            className="opacity-80 hover:opacity-100"
            aria-label="GitHub"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              className="w-6 h-6"
            >
              <path d="M12 1C5.923 1 1 5.923 1 12c0 4.867 3.149 8.979 7.521 10.436.55.096.756-.233.756-.522 0-.262-.013-1.128-.013-2.049-2.764.509-3.479-.674-3.699-1.292-.124-.317-.66-1.293-1.127-1.554-.385-.207-.936-.715-.014-.729.866-.014 1.485.797 1.691 1.128.99 1.663 2.571 1.196 3.204.907.096-.715.385-1.196.701-1.471-2.448-.275-5.005-1.224-5.005-5.432 0-1.196.426-2.186 1.128-2.956-.111-.275-.496-1.402.11-2.915 0 0 .921-.288 3.024 1.128a10.193 10.193 0 0 1 2.75-.371c.936 0 1.871.123 2.75.371 2.104-1.43 3.025-1.128 3.025-1.128.605 1.513.221 2.64.111 2.915.701.77 1.127 1.747 1.127 2.956 0 4.222-2.571 5.157-5.019 5.432.399.344.743 1.004.743 2.035 0 1.471-.014 2.654-.014 3.025 0 .289.206.632.756.522C19.851 20.979 23 16.854 23 12c0-6.077-4.922-11-11-11Z"></path>
            </svg>
          </a>
        </div>
      </div>
    </footer>
  );
};
